<template>
  <!--排序-->
  <ul class="order-ul">
    <li class="order-list"
        v-for="(item,index)  in showOrdrList"
        :class="{active : item.type == activeType}"
        @click=" changeOrder(item.type,item.order)"
        :key="index">{{orderMap.get(item.type)}}
      <div class="arrow-box" v-if=" item.choseAble">
        <span class="arrow-up" :class="{crowDown:item.order == '2'}"></span>
        <span class="arrow-down" :class="{crowUp:item.order == '1'}"></span>
      </div>
    </li>
  </ul>

</template>

<script>
  // import Hello from './components/Hello'

  export default {

    /* orderHeader  用于排序选择的组件*/
    data() {
      return {
        activeType: 'PutTimeSort',
        activeOrder: '',
        orderMap: new Map([
          ['isPutTimeSort', '综合排序'],
          ['isStockSort', '库存排序'],
          ['isCollectionSort', '收藏排序'],
          ['ifSaleSort', '销量排序'],
          ['ifWspriceSort', '价格排序']
        ]),
        showOrdrList: [
          {type: "isPutTimeSort", order: '2'},
//          {type: "isNormalprice", order: 'down'},
          {type: "ifSaleSort", order: '2', choseAble: true},
          {type: "isCollectionSort", order: '2', choseAble: true},
        ]
      }
    },
    components: {},
    props: {
      currentConfig: {
        type: Object,
        default: () => ({
          orderType: 'isPutTimeSort',
          orderDirection: '1',
          orderName: '综合排序'
        }),
      }
    },
    methods: {
      changeOrder(type, order) {
        var activeType = this.activeType
        if (type == activeType) {
          var acitveIndex = this.showOrdrList.findIndex((item) => {
            return item.type == type
          })
          var activeOrder = this.showOrdrList[acitveIndex].order
          var choseAble = this.showOrdrList[acitveIndex].choseAble
          if (!choseAble) {
            return
          }
          else if (activeOrder == '1') {
            this.showOrdrList[acitveIndex].order = '2'
            this.activeOrder = '2'
          }
          else if (activeOrder == '2') {
            this.showOrdrList[acitveIndex].order = '1'
            this.activeOrder = '1'
          }
          else {
            this.activeOrder = ""
          }
        } else {
          this.activeOrder = order
        }
        this.activeType = type
        var config = {
          orderType: this.activeType,
          orderDirection: this.activeOrder,
          orderName: this.orderMap.get(this.activeType)
        }
        this.$emit('choseOrder', config)
      },
    },
    watch: {},

    created() {
      var config = this.currentConfig
      this.activeOrder = config.orderDirection
      this.activeType = config.orderType

    },

  }
</script>

<style scoped>

  .order-ul {
    width: 100%;
    height: 2.2rem;
    display: flex;
    border-bottom: 1px solid rgb(238, 238, 238);
    justify-content: space-between;
    padding: 0 0.2rem 0 0.2rem;
    font-size: 0.7rem;
    align-items: center;
    align-content: center;
  }

  .order-list {
    color: rgb(130, 130, 130);
    font-size: 0.7rem
  }

  .active {
    color: rgb(41, 154, 40)
  }

  .arrow-box {
    display: inline-block;
    width: 0.45rem;
    height: 0.44rem;
    position: relative;
  }

  .arrow-up, .arrow-down {
    display: block;
    position: absolute;
    left: 0;
    border-style: solid;
    border-color: transparent;
    border-width: 0.2rem;
    width: 0rem;
    height: 0rem;
  }

  .arrow-up {
    border-top-color: #999999;
    bottom: -0.2rem
  }

  .arrow-down {
    border-bottom-color: #999999;
    top: -0.25rem
  }

  .active .crowUp {
    border-bottom-color: green;

  }

  .active .crowDown {
    border-top-color: green;

  }

  .cjy-background-white {
    background: rgba(255, 255, 255, 0.8);
  }


</style>
